import { Typography } from "antd"
import { useTranslation } from "react-i18next"

import type { Ref } from "react"
import React, { memo } from "react"
import type { CommonDescription } from "@/pages/wms/station/widgets/types"
// import IntlMessages from "@/util/IntlMessages"
import type { pickingViewItem } from "@/pages/wms/station/event-loop/types"

const { Text } = Typography
// 占位图片
export const placeholderImage =
    ""

interface SnInfo {
    /** sn号 */
    snCode: string
    /** sn数量 */
    snCount: number
    /** skuId */
    skuId: string
}

export interface SkuInfoProps {
    refs?: Ref<unknown>
    /** sku编码 */
    skuCode?: string
    /** 订单id */
    orderId?: string
    /** sku名称 */
    skuName: string
    /** sn详情 */
    snInfos?: SnInfo[]
    /** 批次属性 */
    batchAttributeJson?: Record<string, string>
    /** sku描述 */
    skuDesc?: CommonDescription[]
    /** 商品批次信息 */
    batchAttributesInfo?: CommonDescription[]
    /** 需要拣选数量 */
    requiredQty?: number
    /** 已经拣选数量 */
    pickedQty?: number
    /** 待拣选数量 */
    toBePickedQty?: number
    /** 数量展示规则 */
    amountDisplayRule?: any
    /** 商品图片 */
    imageUrl?: string
    /** 商品图片 */
    skuUrl?: string
    /** sku是否已经扫描过 */
    scanned: boolean
    /** 是否禁用 */
    disabled?: boolean
    /** 商品图片宽度 */
    imgWidth?: number
    /** 商品图片高度 */
    detailHeight?: number
    /** 理库任务单号 */
    taskDetailNo?: string
    /** 需要理库数量 */
    targetQty?: number
    /** 实际理库数量 */
    actualQty?: number
    /** 工作站配置的商品展示字段 */
    skuDisplayProperty?: CommonDescription[]
    skuAttributes?: any
    barCode?: string
    url: string
}

const SkuInfo = (props: Partial<pickingViewItem> & Partial<SkuInfoProps>) => {
    const {
        imgWidth = 204,
        detailHeight = 204,
        // skuMainDataDTO,
        // skuBatchAttributeDTO
        skuAttributes,
        skuName,
        barCode,
        url
    } = props

    const { t } = useTranslation()
    // const { skuAttributes = {} } = skuBatchAttributeDTO || {}
    // const { skuName, skuBarcode, skuAttribute } = skuMainDataDTO || {}
    // const url = skuAttribute?.imageUrl || placeholderImage

    const returnNotBatchPropertyContent = (value: string) => {
        return (
            <Text className="flex-1" ellipsis={{ tooltip: true }}>
                {value}
            </Text>
        )
    }

    return (
        <div className="d-flex bg-white w-full p-3 pl-0">
            <div
                className="h-full"
                style={{
                    backgroundImage: `url(${url || placeholderImage})`,
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "top center",
                    backgroundOrigin: "50%",
                    backgroundSize: "cover",
                    width: imgWidth,
                    height: detailHeight,
                    flexBasis: imgWidth,
                    backgroundColor: "#f8f8f8",
                    borderRadius: 10
                }}
            />

            <div className="d-flex flex-1 flex-col h-full pl-4 overflow-y-auto text-current  ">
                <div
                    className="text-ellipsis text-lg pb-1 w-full"
                    style={{ color: "#292B3E", minWidth: 0 }}
                    data-testid="skuCode"
                >
                    {/* {skuBarcode?.barcodes.join(" | ")} */}
                    {barCode}
                </div>
                <div
                    className="text-ellipsis text-lg pb-2 w-full"
                    style={{ color: "#292B3E", minWidth: 0 }}
                >
                    {skuName}
                </div>

                <div className="d-flex flex-wrap w-full gap-1">
                    {skuAttributes &&
                        Object.keys(skuAttributes)?.map((key, index) => {
                            return (
                                <div
                                    key={key}
                                    className="d-flex items-center  py-2 pl-3 mb-2 mr-3 "
                                    style={{
                                        color: "#696B7D",
                                        backgroundColor: "#F8F8F8",
                                        width: "45%"
                                    }}
                                >
                                    <div className="overflow-hidden text-right	white-space-nowrap text-ellipsis">
                                        <span>{key}</span>
                                        <span
                                            className="px-2"
                                            style={{ color: "#DCDCDC" }}
                                        >
                                            |
                                        </span>
                                    </div>
                                    <div>
                                        {returnNotBatchPropertyContent(
                                            skuAttributes[key]
                                        )}
                                    </div>
                                </div>
                            )
                        })}
                </div>
            </div>
        </div>
    )
}

export default memo(SkuInfo)
